<template>
    <div class="common_verify">
        <div class="con">
            <!-- 手机号 -->
            <template v-if="formConfig.tell">
                <van-field v-model="mobilePhone" :label="formConfig.tell.lable" clearable type="tel" :placeholder="formConfig.tell.placeholder" />
            </template>
            <!-- 验证码 -->
            <template v-if="formConfig.code">
                <verify-code :mobilePhone="mobilePhone" :label="formConfig.code.lable" :smsCode.sync="smsCode" :type="type"></verify-code>
            </template>
            <!-- 密码 -->
            <template v-if="formConfig.pwd">
                <van-field v-model="password" :label="formConfig.pwd.lable" clearable :type="pwdShow? 'text':'password'" :placeholder="formConfig.pwd.placeholder" :right-icon="pwdShow? 'closed-eye':'eye-o'" @click-right-icon="pwdShow = !pwdShow" />
            </template>
            <!-- 确认密码 -->
            <template v-if="formConfig.conformPwd">
                <van-field v-model="conformPwd" :label="formConfig.conformPwd.lable" clearable :type="conformPwdShow? 'text':'password'" :placeholder="formConfig.conformPwd.placeholder" :right-icon="conformPwdShow? 'closed-eye':'eye-o'" @click-right-icon="conformPwdShow = !conformPwdShow" />
            </template>
            <!-- 邀请码 -->
            <template v-if="formConfig.inviterCode">
                <van-field v-model="inviterCode" :label="formConfig.inviterCode.lable" clearable :placeholder="formConfig.inviterCode.placeholder"/>
            </template>
        </div>
        <slot name="other"></slot>
        <div class="box_con">
            <van-button type="info" size="large" @click="submitAction">{{formConfig.butt.text}}</van-button>
        </div>
    </div>
</template>

<script>

// 普通的登录框
import VerifyCode from "@/components/form/verify-code-left";
import { mapGetters, mapMutations } from 'vuex'

export default {

    props: {
        // 手机号一行配置文案
        formConfig: {
            type: Object,
            default: function () {
                return {}
            }
        },
        type: {
            type: String,
            default: "",
        }
    },

    data() {
        return {
            mobilePhone: "",
            smsCode: "",
            password: "",
            conformPwd: "",
            inviterCode: "", // 邀请码
            pwdShow: false,
            conformPwdShow: false,
        }
    },

    components: { VerifyCode },

    mounted() {
        // this.userInfo.mobilePhone && (this.mobilePhone = this.userInfo.mobilePhone);
    },

    methods: {

        // 提交按钮
        submitAction() {
            const submitData = {};
            // 校验数据
            // 手机号
            if (this.formConfig.tell) {
                if (this.$check.start(this.mobilePhone, "手机号").isNull().isTell().endShow()) {
                    return false;
                } else {
                    submitData.mobilePhone = this.mobilePhone;
                }
            }
            // 验证码
            if (this.formConfig.code) {
                if (this.$check.start(this.smsCode, "验证码").isNull().isCode().endShow()) {
                    return false;
                } else {
                    submitData.smsCode = this.smsCode;
                }
            }
            // 密码
            if (this.formConfig.pwd) {
                if (this.$check.start(this.password, "密码").isNull().endShow()) {
                    return false;
                } else {
                    submitData.password = this.password;
                }
            }
            // 确认密码
            if (this.formConfig.conformPwd) {
                if (this.password != this.conformPwd) {
                    this.$toast("两次密码输入不一致，请重新输入");
                    return;
                }
            }
            // 邀请码
            if (this.formConfig.inviterCode) {
                submitData.invitationCode = this.inviterCode;
            }
            this.$emit("submit", submitData);
        }
    },

    computed: {
        ...mapGetters([
            'userInfo',
        ])
    },
};
</script>

<style lang="scss" scoped>
.common_verify {
    width: 100%;
}
</style>